<template>
	<view class="personalDataBgc">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" >
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<block v-for="(item, index) in inforList">
			<uni-nav-bar :fixed='true'>
					<view class="" style="font-size: 36rpx;">
						个人资料
					</view>
					<view slot="left">
						<image src="../../static/img/3e265cff8632c9bdab46264fcbdab0a.png" mode="" class="leftPic" @click="goBack"></image>
					</view>
					<view slot="right">
						<view class="saveBtn" @click="saveBtn" style="font-size: 36rpx;">
							保存
						</view>
					</view>
			</uni-nav-bar>
			<view class="headPicBox">
				<view class="relative" @click="avatarBtn">
					<image :src="item.avatar" mode="" ></image>
					<view>点击更换头像</view>
				</view>

			</view>
			<view class="bgcWhite paddingLR  ">
				<view class="me-fx-row-start-c height">
					<view class="width">
						昵称
					</view>
					<input type="text" value="" v-model="inputName" class="fontSize"/>
				</view>
				<view class="borderTop me-fx-row-start-c height fontSize" @click="adressBtn">
					<view class="width">
						常住城市
					</view>
					<view class="">
						{{inputAdress}}
					</view>
				</view>
				<view class="borderTop height me-fx-row-start-c fontSize" @click="inputAgeBtn">
					<view class="width">
						年龄
					</view>
					<view class="">
						{{inputAge}}
					</view>
				</view>
			</view>
			<view class="marginTop bgcWhite paddingLR fontSize">
				<view class="height me-fx-row-start-c " @click="constellationShow=true">
					<view class="width">
						星座
					</view>
					{{inputXZ}}
				</view>
				<view class="height borderTop me-fx-row-start-c" @click="occupationShow=true">
					<view class="width">
						职业
					</view>
					{{inputZY}}
				</view>
				<view class="height borderTop me-fx-row-start-c fontSize" @click="program=true">
					<view class="width">
						交友节目
					</view>
					<block class="" v-for="item in inputJY">
						{{item}} ,
					</block>
				</view>
				<view class="height borderTop me-fx-row-start-c  fontSize" @click="QWobject=true">
					<view class="width">
						期望对象
					</view>
					<block v-for="item in inputQW">
						{{item}} ,
					</block>
				</view>
			</view>
			<view class="moreInfor paddingLR">
				社交账号(选填)
			</view>
			<view class=" bgcWhite paddingLR">
				<view class="height me-fx-row-start-c fontSize">
					<view class="width">
						微信
					</view>
					<input type="text" value="" v-model="inputWeixin" />
				</view>
			</view>
			<view class="moreInfor paddingLR height ">
				更多信息(选填)
			</view>
			<view class="backWhite">
				<view class="me-fx-row-sb-c paddingLR height" @click="heightShow=true">
					<view class="me-fx-row-start-c fontSize">
						<view class="width">
							身高
						</view>
						<view class="">
							{{heightValue}}
						</view>
					</view>
					<image src="../../static/img/xiala.png" mode="" class="image"></image>
				</view>
				<view class="me-fx-row-sb-c paddingLR borderTop" @click="wightShow=true">
					<view class="me-fx-row-start-c height fontSize">
						<view class="width">
							体重
						</view>
						<view class="">
							{{weightValue}}
						</view>
					</view>
					<image src="../../static/img/xiala.png" mode="" class="image"></image>
				</view>
			</view>
			<view class="borderTop fontSize">
				<view class="paddingLR marginTop">
					个人介绍
				</view>
				<textarea placeholder="介绍一下我自己" class="padding" v-model="introduce"></textarea>
			</view>
		</block>
		<!-- 城市 -->
		<u-picker mode="region" v-model="show" :default-selector="[0]" @confirm='confirm'></u-picker>
		<!-- 年龄 -->
		<u-picker v-model="selectorShow" mode="selector" :range="selectorage" @confirm='ageBtn'></u-picker>
		<!-- 星座 -->
		<u-picker v-model="constellationShow" mode="selector" :range="constellation" range-key="name" :data-kk="constellation.id"
		 @confirm='constellationSure'></u-picker>
		<!-- 职业 -->
		<u-picker v-model="occupationShow" mode="selector" :range="occupation" range-key="name" @confirm='occupationSrue'></u-picker>
		<!-- 身高 -->
		<u-picker v-model="heightShow" mode="selector" :range="height" @confirm='heightSure'></u-picker>
		<!-- 体重 -->
		<u-picker v-model="wightShow" mode="selector" :range="weightRang" @confirm='wightSure'></u-picker>
		<!-- 交友节目 -->
		<view class="Covering" v-if="program">
			<view class="bottomFiex">
				<view class="topHead me-fx-row-sb-c">
					<view class="blure" @click="program =false">取消</view>
					<view>交友节目</view>
					<view @click="bottomSure" class="blure">确定</view>
				</view>
				<view class="bottomConterBox">
					<checkbox-group>
						<label class="worker-bar me-fx-row-c bottomConter" v-for="item in bottomConter" :key="item.id" :data-id='item.id'
						 :data-name='item.name' @click="checkBoxBtn">
							<view>{{item.name}}</view>
							<checkbox :value="item.name" :checked="item.isSlected" />
						</label>
					</checkbox-group>
				</view>
				<view class="bottomConterBox2 me-fx-row-c">
					<view class="bottomConterList" v-for="(item, index) in bottomConterList">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- 期望对象 -->
		<view class="Covering" v-if="QWobject">
			<view class="bottomFiex">
				<view class="topHead me-fx-row-sb-c">
					<view class="blure" @click="QWobject = false">取消</view>
					<view>期望对象</view>
					<view @click="QWobjectSure" class="blure">确定</view>
				</view>
				<view class="bottomConterBox">
					<checkbox-group>
						<label class="worker-bar me-fx-row-c bottomConter" v-for="item in QWobjectConter" :key="item.id" :data-id='item.id'
						 :data-name='item.name' @click="checkboxQWobject">
							<view>{{item.name}}</view>
							<checkbox :value="item.name" :checked="item.isSlected" />
						</label>
					</checkbox-group>
				</view>
				<view class="bottomConterBox2 me-fx-row-c">
					<view class="bottomConterList" v-for="(item, index) in inputQWList ">
						{{item}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url
	} from '@/utils/api.js'
	import {
		getCaption
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				inputName: '',
				inputAdress: '',
				inputAge: '',
				inputWeixin: '',
				inputXZ: '',
				inputZY: '',
				inputJY: [],
				inputQW: [],
				heightValue: '',
				weightValue: '',
				show: false,
				selectorage: [],
				selectorShow: false,
				constellation: [],
				constellationShow: false,
				occupation: [],
				occupationShow: false,
				height: [],
				heightShow: false,
				weightRang: [],
				wightShow: false,
				program: false,
				QWobject: false,
				constellationIndex: -1,
				occupationIndex: -1,
				occupationID: -1,
				bottomConterList: [],
				bottomConter:[],
				inputQWList: [],
				inforList: [],
				fileList: [],
				text: '',
				introduce:'',
				avatar:'',
				constellationID:'',
				longitude:'',
				latitude:'',
				inputJYID:[],
				inputXZID:'',
				inputQWID:[],
				qwIdList:[],
				jyIdList:[],
				barHeight:25

			}
		},
		created() {
				this.userInforData();
			
			for (let i = 18; i < 101; i++) {
				this.selectorage.push(i)
			}
			for (let i = 140; i < 220; i++) {
				this.height.push(i)
			}
			for (let i = 80; i < 250; i++) {
				this.weightRang.push(i)
			}
			setTimeout(()=>{
				this.constellationData();
				this.programData();
				this.QWobjectConterData();
			},200)
		},
		methods: {
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height;
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				// #endif
			},
			avatarBtn(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: url+'/image/upload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								console.log(this.inforList.data.avatar,'this.inforList')
								 this.inforList.data.avatar =JSON.parse(uploadFileRes.data).url
								this.avatar =JSON.parse(uploadFileRes.data).url
				            }
				        });
				    }
				});
			},
			saveBtn(){
				this.adress()
				setTimeout(()=>{
					console.log(this.avatar,'avatar')
				let data={
					avatar:this.avatar,
					username:this.inputName,
					city:this.inputAdress,
					age:this.inputAge,
					constellation_id:this.inputXZID,
					job_id:this.occupationID,
					show_menu_id_collection:this.inputJYID,
					expect_obj_tag_id_collection:this.inputQWID,
					longitude:this.longitude,
					latitude:this.latitude,
					height:this.heightValue,
					weight:	this.weightValue,
					introduce:this.introduce,
					wechat_account:this.inputWeixin,
				}	
				this.$u.put('/user/info/edit',data).then(res => {
						if (res) {
							console.log(res, 'res')
							uni.showToast({
								title:'修改成功',
								duration:1000,
								icon:'none'
							})
							this.userInforData()
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
				},500)
				
			},
			adress(){
				console.log(this.inputAdress,'this.inputAdress')
				uni.request({
				    url: 'https://restapi.amap.com/v3/geocode/geo?address='+this.inputAdress +'&output=' +'json' +'&key='+'e52536eff20ad4bf70ca0659ce3c46e2',
				    header: {
				        "Content-Type": "application/json",
				    },
					method:'get',
				    success: (res) => {
						 this.longitude=getCaption(res.data.geocodes[0].location,0);
						this.latitude=getCaption(res.data.geocodes[0].location,1);
						console.log(this.longitude,this.latitude)
				    },
					fail:(res)=>{
						uni.showToast({
							title:'网络异常',
							duration:1000,
							icon:'none'
						})
					}
				});
			    },
			adressBtn() {
				this.show = true
			},
			QWobjectConterData() {
				this.$u.get('/expect_obj_tag/index').then(res => {
						if (res) {
							this.QWobjectConter = res.data.list
							for(let i=0;i <= res.data.list.length; i++){
								if(this.inputQWID.includes(res.data.list[i].id)){
									this.inputQW.push(res.data.list[i].name)
								}
							}
						}
					})
					.catch((res) => {
					})
			},
			goBack(){
				uni.navigateBack()
			},
			userInforData() {
				this.$u.get('/user/info').then(res => {
						if (res) {
							this.inforList = res.data
							this.inputName = res.data.data.username
							this.inputAdress = res.data.data.city
							this.inputAge = res.data.data.userInfo.age
							this.inputXZID = res.data.data.userInfo.constellation_id
							this.inputZY = res.data.data.userInfo.job_id
							this.occupationID=res.data.data.userInfo.job_id
							this.inputJYID = res.data.data.userInfo.show_menu_id_collection
							this.inputQWID = res.data.data.userInfo.expect_obj_tag_id_collection
							this.heightValue = res.data.data.userInfo.height
							this.weightValue = res.data.data.userInfo.weight
							this.introduce=res.data.data.userInfo.introduce
							this.avatar=res.data.data.avatar
							this.inputWeixin =res.data.data.socialAccount.wechat_account
									this.occupationData()
						}
					})
					.catch((res) => {
					})
			},
			inputAgeBtn() {
				this.selectorShow = true
			},
			programData() {
				this.$u.get('/show_menu/index').then(res => {
						if (res) { 
							this.bottomConter = res.data.list
							for(let i=0;i < res.data.list.length; i++){
								if(this.inputJYID.includes(res.data.list[i].id)){
									this.inputJY.push(res.data.list[i].name)
								}
							}
						}
					})
					.catch((res) => {
					})
			},
			constellationData() {
				this.$u.get('/constellation/index').then(res => {
						if (res) {
							this.constellation = res.data.list
							for(let i = 0;i<res.data.list.length;i++){
								if(this.inputXZID == res.data.list[i].id){
								this.inputXZ =res.data.list[i].name
								return
								}
							}
						}
					})
					.catch((res) => {
					})
			},
			occupationData() {
				this.$u.get('/job/index').then(res => {
						if (res) {
							this.occupation = res.data.list
							for(let i = 0;i<res.data.list.length;i++){
								if(this.inputZY == res.data.list[i].id){
								this.inputZY =res.data.list[i].name
								return
								}
							}
						}
					})
					.catch((res) => {
					})
			},
			confirm(e) {
				if (e.province.value == '11') {
					this.inputAdress = e.province.label
				} else if (e.province.value == '12') {
					this.inputAdress = e.province.label
				} else if (e.province.value == '31') {
					this.inputAdress = e.province.label
				} else {
					this.inputAdress = e.city.label
				}
				this.adress()
			},
			ageBtn(e) {
				let index = e[0]
				this.inputAge = this.selectorage[index]
			},
			constellationSure(e) {
				this.constellationIndex = e[0]
				this.inputXZ = this.constellation[this.constellationIndex].name
				this.constellationID = this.constellation[this.constellationIndex].id
			},
			occupationSrue(e) {
				this.occupationIndex = e[0]
				this.inputZY = this.occupation[this.occupationIndex].name
				this.occupationID = this.occupation[this.occupationIndex].id
			},
			heightSure(e) {
				this.heightShow = false;
				this.heightValue = this.height[e]
			},
			wightSure(e) {
				this.wightShow = false;
				this.weightValue = this.weightRang[e]
			},
			bottomSure() {
				if(this.bottomConterList.length > 0){
					this.inputJY = this.bottomConterList
					this.bottomConterList = []
				}
				if(this.jyIdList.length >0){
					this.inputJYID =this.jyIdList
				}
				this.please = false
				this.program = false
			},
			QWobjectSure() {
				if(this.inputQWList.length > 0){
					this.inputQW = this.inputQWList
					this.inputQWList = []
				}
				if(this.qwIdList.length>0){
					this.inputQWID = this.qwIdList
				}
				this.QWobject = false
				this.pleaseObj = false
				
			},
			checkboxQWobject(e) {
				if(this.qwIdList.includes(e.currentTarget.dataset.id)){
					this.inputQWList =this.inputQWList.filter(item=>item != e.currentTarget.dataset.name)
					this.qwIdList= this.qwIdList.filter(item=>item != e.currentTarget.dataset.id)
				}else{
					this.inputQWList.push(e.currentTarget.dataset.name)
					this.qwIdList.push(parseInt(e.currentTarget.dataset.id))
				}
			},
			checkBoxBtn(e) {  	
				if(this.jyIdList.includes(e.currentTarget.dataset.id)){
					this.bottomConterList =this.bottomConterList.filter(item=>item != e.currentTarget.dataset.name)
					this.jyIdList= this.jyIdList.filter(item=>item != e.currentTarget.dataset.id)
				}else{
					this.bottomConterList.push(e.currentTarget.dataset.name)
					this.jyIdList.push(parseInt(e.currentTarget.dataset.id))
				}
				console.log(this.jyIdList,parseInt(e.currentTarget.dataset.id))
			},
		}
	}
</script>

<style>
	.status_bar,.top_view{
		background-color: white;
	}
	.backWhite{
		background-color: white;
	}
	.personalDataBgc {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		font-size: 30rpx;
	}
.personalDataBgc /deep/.uni-navbar--fixed {
		width: 100%;
	}
	.padding {
		padding: 10rpx 32rpx;
		box-sizing: border-box;
	}

	.paddingLR {
		padding: 0rpx 32rpx;
	}

	 .leftPic{
		width: 20rpx;
		height: 35rpx;
	}

	.headPicBox {
		width: 100%;
		text-align: center;
		margin: 30rpx 0 0rpx;
		height: 230rpx;
	}

	.headPicBox image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

	}

	.headPicBox text {
		color: rgba(153, 153, 153, 1);
	}

	.saveBtn {
		color: rgba(92, 20, 255, 1);
		padding-left: 76rpx;
	}

	.bgcWhite {
		background-color: white;
	}

	.borderTop {
		border-top: 1rpx solid #F5F5F5;
	}

	.height {
		height: 110rpx;
		line-height: 110rpx;
	}

	.width {
		width: 180rpx;
	}
	.fontSize{
		font-size: 30rpx;
	}
	.marginTop {
		margin-top: 24rpx;
	}

	.moreInfor {
		height: 112rpx;
		line-height: 112rpx;
		color: rgba(102, 102, 102, 1);
		background-color: #F5F5F5;
	}

	.image {
		width: 20rpx;
		height: 10rpx;
	}

	.bottomFiex {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100;
		background-color: white;
		padding: 20rpx;
		width: 100%;
	}

	.bottomConterBox .bottomConter:nth-of-type(n+2) {
		border-top: 1rpx solid #ccc;
	}

	.bottomConter {
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.bottomConter view {
		/* margin-right:20rpx */
	}

	.bottomConterBox /deep/uni-checkbox .uni-checkbox-input {
		border: none
	}

	.bottomConterList {
		padding: 4rpx 6rpx;
		border: 1rpx #0077FF solid;
		margin-right: 20rpx;
		margin-top: 20rpx;
		color: #ccc;
	}

	.bottomConterBox2 {
		flex-wrap: wrap
	}

	.blure {
		color: #0079F4;
	}

	.headPicBox /deep/.u-icon {
		display: none;
	}

	.headPicBox /deep/.u-upload {
		position: absolute;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.headPicBox /deep/.u-upload view {
		margin: auto;
		background: transparent;
		border: none;
	}

	.headPicBox /deep/.u-list-item {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.headPicBox /deep/.u-list-item image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.widthMar {
		width: 60rpx;
		margin: auto;
	}
</style>
